<template>
    <div>
        <el-row>
            <el-col :span="24" :inline="true" class="operateView">
                <el-form :inline="true" style="margin:10px 0;margin-left: 10px;">
                    <el-button @click="operateAction('back')" type="info" plain size="small">返回</el-button>
                    <el-button @click="operateAction('checkPass')" type="primary" plain size="small" v-if="$route.query.type=='check'">通过</el-button>
                    <el-button @click="operateAction('checkRefuse')" type="danger" plain size="small" v-if="$route.query.type=='check'">拒绝</el-button>
                </el-form>
            </el-col>
        </el-row>
        <div class="app-container">
            <el-row style="margin-top: 10px">
                <el-form label-position="left">
                    <el-row style="display: flex;flex-direction: row;flex-wrap: wrap;">
                        <el-col style="margin-left: 20px" :span="item.width ? item.width : 5"
                            v-for="(item, index) in formData.detailFieldList" :key="index" v-if="passRole(item.roles)">
                            <el-form-item :label="item.showName + ':'" :prop="item.key"
                                v-if="item.formType == 'Switch'">
                                    {{ rowForm[item.key] ? '是' : '否' }}
                            </el-form-item>
                            <el-form-item :label="item.showName + ':'" :prop="item.key" v-else-if="item.formType == 'Textarea'">
                                {{ rowForm[item.key] }}
                            </el-form-item>
                            <el-form-item :label="item.showName + ':'" :prop="item.key" v-else-if="item.formType == 'RichText'">
                                <Editor v-model="rowForm[item.key]" :minHeight="600" />
                            </el-form-item>
                            <el-form-item :label="item.showName + ':'" :prop="item.key" v-else-if="item.formType == 'DatePicker'">
                                {{ formatTime.dateFormat('YY-MM-DD hh:mm:ss', rowForm[item.key]) }}
                            </el-form-item>
                            <el-form-item :label="item.showName + ':'" :prop="item.key" v-else-if="item.formType == 'Record'">
                                {{ rowForm[item.relatedModel]?rowForm[item.relatedModel][item.relatedKey]:'' }}
                            </el-form-item>
                            <el-form-item :label="item.showName + ':'" :prop="item.key" v-else-if="item.formType == 'Option'">
                                {{formData.dicts[item.key][rowForm[item.key]] }}
                            </el-form-item>
                            <el-form-item :label="item.showName + ':'" :prop="item.key" v-else-if="item.formType == 'Upload'">
                                <el-image :style="{'width': item.imgW+'px', 'height': item.imgH+'px'}" fit="contain" :src="rowForm[item.key]"></el-image>
                            </el-form-item>
                            <el-form-item :label="item.showName + ':'" :prop="item.key" v-else>
                                {{ rowForm[item.key] }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-row>
        </div>
        <el-dialog :visible.sync="isShow" width="800px" title='' append-to-body>
            <el-form ref="rowForm" :model="form" :rules="rules" label-position="top" style="margin-top: 20px;">
                <el-row style="display: flex;flex-direction: row;flex-wrap: wrap;">
                    <el-col style="margin-left: 20px" :span="18">
                        <el-form-item label="拒绝原因" prop="remark">
                            <el-input v-model="form.remark" placeholder="请输入" clearable type='textarea' :rows="8" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div style="margin-top: 30px;width: 100%;display: flex;flex-direction: row;justify-content: flex-end;">
            <el-button type="primary" @click="operateAction('checkRefuseSave')">保存</el-button>
            <el-button @click="isShow = false" type="info" size="mini">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { MessageBox, Message } from 'element-ui'
export default {
    components: {},
    data() {
        return {
            rowId: '',
            rowForm: {},
            formData: {},
            isShow: false,
            form: {},
            rules:{
                remark: [
                    { required: true, message: '请输入拒绝原因', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        if (this.$route.query.formData) {
            this.formData = JSON.parse(decodeURIComponent(this.$route.query.formData))
        }
        if (this.$route.query.rowId) {
            this.rowId = this.$route.query.rowId
            this.getItemById()
        }
    },
    methods: {
        operateAction(scene) {
            var data = {}
            switch (scene) {
                case 'back':
                    this.$router.push({name: this.$route.query.currentRouteName, query: {currentSearchParams: this.$route.query.currentSearchParams}})
                    break;
                case 'checkPass':
                    this.request_post(this.formData.checkPassUrl, {obj_id: this.rowId}).then(res => {
                        if (res.data.code == 10000) {
                            this.$router.push({name: this.$route.query.currentRouteName, query: {currentSearchParams: this.$route.query.currentSearchParams}})
                            Message({
                                message: '操作成功',
                                duration: 5 * 1000
                            })
                        }
                    });
                    break;
                case 'checkRefuse':
                    this.isShow = true
                    break;
                case 'checkRefuseSave':
                    this.$refs['rowForm'].validate((valid) => {
                        if (valid) {
                            this.request_post(this.formData.checkRefuseUrl, {obj_id: this.rowId, remark: this.form.remark}).then(res => {
                                if (res.data.code == 10000) {
                                    this.$router.push({name: this.$route.query.currentRouteName, query: {currentSearchParams: this.$route.query.currentSearchParams}})
                                    Message({
                                        message: '操作成功',
                                        duration: 5 * 1000
                                    })
                                }
                            });
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                    break;
                default:
                    break;
            }
        },
        // 获取item详情
        getItemById() {
            this.request_post(this.formData.getItemUrl, {obj_id: this.rowId}).then(res => {
                if (res.data.code == 10000) {
                    this.rowForm = res.data.data
                }
            });
        },

    }
}
</script>

<style lang="scss" scoped>
.operateView {
    width: 100%;
    background-color: #FFF;
    display: flex;
    flex-direction: row;
    align-items: center;
}
</style>
